<template>
  <div>
    <div class="card" style="margin-bottom: 5px;">
      <el-input style="width:240px; margin-right:10px" v-model="data.name" placeholder="请输入名称查询" :prefix-icon="Search"></el-input>
      <el-button type="primary">查 询</el-button>
      <el-button type="warning">重 置</el-button>
    </div>

    <div class="card" style="margin-bottom: 5px;">
      <el-button type="primary">新 增</el-button>
      <el-button type="danger">批量删除</el-button>
      <el-button type="info">导 入</el-button>
      <el-button type="success">导 出</el-button>
    </div>

    <div class="card" style="margin-bottom: 5px;">
      <el-table style="width: 100%" :data="data.tableData" stripe >
        <el-table-column prop="id" label="ID" width="180"></el-table-column>
        <el-table-column prop="date" label="出生日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址" width="180"></el-table-column>
      </el-table>
      <div style="padding: 10px 0">
        <el-pagination
            v-model:current-page="data.pageNum"
            v-model:page-size="data.pageSize"
            :page-sizes="[5, 10, 15, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.total"
        />
      </div>
    </div>

  </div>
</template>

<script setup>
import { reactive } from 'vue'
import {Search} from "@element-plus/icons-vue";

const data = reactive({
  name:null,
  tableData:[
    { id:1, date:'2023-02-22',name:"小明",address:"珠江新城花城大道66号A5454" },
    { id:2, date:'2023-02-21',name:"小红",address:"高原路1号二楼财务室" },
    { id:3, date:'2023-02-02',name:"小商",address:"双福路中段邮政储蓄银行" },
  ],
  pageNum:1,
  pageSize:10,
  total:47
})
</script>

<style scoped>

</style>